<template>
  <div class="model-con">
    <div class="title">加减分</div>
    <div class="mytable">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        max-height="500"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        highlight-hover-row
        header-align="center"
        align="center"
        @cell-click="cellClickEvent"
        :cell-class-name="cellClassName">
        <!-- :header-cell-class-name="headerStyle"
      :row-class-name="rowClass" -->
        <vxe-column field="status" title="加减分申报通知" min-width="120" fixed="left">
          <template #default="{ row }">
            <span class="status" v-if="row.status == 0">未发布</span>
            <span v-if="row.status == 1">已发布</span>
          </template>
        </vxe-column>
        <vxe-column field="endTime" title="加减分申报截止时间" min-width="150"></vxe-column>
        <vxe-column field="whetherBy" title="是否截止" min-width="100">
          <template #default="{ row }">
            <span class="status" v-if="row.whetherBy == '0'">未截止</span>
            <span class="status" v-if="row.whetherBy == '1'">已截止</span>
          </template>
        </vxe-column>
        <vxe-colgroup field="group0" title="加减分审定情况">
          <vxe-column field="adminName" title="管理员" min-width="180"></vxe-column>
          <vxe-column field="addNum" title="加分项" min-width="180"></vxe-column>
          <vxe-column field="minusNum" title="减分项" min-width="180"></vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </div>

    <!-- 加减分审定情况 开始-->
    <XnDialog
      custom-class="branch_dialog"
      title="加减分审定情况"
      :visible.sync="dialogShow"
      @close="dialogShow = false">
      <el-tabs v-model="activeName" @tab-click="handleClickTabs">
        <el-tab-pane :label="'加分项(' + addLists.length + ')'" name="1"></el-tab-pane>
        <el-tab-pane :label="'减分项(' + minusLists.length + ')'" name="2"></el-tab-pane>
      </el-tabs>
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        height="500"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData1"
        highlight-hover-row
        header-align="center"
        align="center">
        <vxe-column field="userName" :title="activeText + '对象'" min-width="100" fixed="left"></vxe-column>
        <vxe-column field="boundsTypeName" :title="activeText + '项类别'" min-width="120"></vxe-column>
        <vxe-column field="boundsLevelName" :title="activeText + '项级别'" min-width="120"></vxe-column>
        <vxe-column field="boundsName" :title="activeText + '项名称'" min-width="120"></vxe-column>
        <vxe-column field="boundsRemark" :title="activeText + '项说明'" min-width="120"></vxe-column>
        <vxe-column align="left" header-align="center" field="endDate" title="证明材料" min-width="260">
          <template #default="{ row }">
            <!--  -->
            <UploadPreview :fileList="row.albumList" type="2"></UploadPreview>
          </template>
        </vxe-column>
        <vxe-column field="score" title="评分" min-width="120"></vxe-column>
      </vxe-table>
    </XnDialog>

    <!-- 加减分审定情况 结束-->
  </div>
</template>

<script>
import { addSubtractStatistical } from '@api/modules/api-staAnalysis.js'
import UploadPreview from '@com/UploadPreview/index.vue'
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'PlusMinus',
  components: { UploadPreview, XnDialog },
  props: {
    selectParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tableData: [],
      dialogShow: false,
      activeName: '1',
      tableData1: [],
      tablePage: {
        pageNum: 1,
        pageSize: 20,
        totalSize: 0,
      },
      addLists: [],
      minusLists: [],
    }
  },
  watch: {
    selectParams: {
      handler(newValue, oldValue) {
        // console.log(oldValue)
        console.log(newValue)
        if (newValue.quarter && newValue.year && newValue.orgId) {
          this.pageInit()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    activeText() {
      if (this.activeName === '1') {
        return '加分'
      } else {
        return '减分'
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    async pageInit() {
      const { data } = await addSubtractStatistical({
        ...this.selectParams,
      })
      const plusMinusArr = []
      const plusMinusObj = {
        status: data.status,
        endTime: data.endTime,
        whetherBy: data.whetherBy,
        adminName: data.adminName,
        addNum: data.addNum + '项',
        minusNum: data.minusNum + '项',
      }
      plusMinusArr.push(plusMinusObj)
      this.tableData = plusMinusArr
      this.addLists = data.addLists && data.addLists.length ? [...data.addLists] : []
      this.minusLists = data.minusLists && data.minusLists.length ? [...data.minusLists] : []
    },
    /* 分页切换 */
    onPageChange(e) {
      this.tablePage.pageNum = e.currentPage
      this.initdata()
    },
    // 点击单元格
    cellClickEvent({ column }) {
      if (column.property === 'addNum') {
        this.activeName = '1'
      } else if (column.property === 'minusNum') {
        this.activeName = '2'
      }
      if (['addNum', 'minusNum'].includes(column.property)) {
        this.dialogShow = true
        this.handleClickTabs()
      }
    },
    /* 切换 */
    handleClickTabs() {
      if (this.activeName === '1') {
        this.tableData1 = [...this.addLists]
      } else if (this.activeName === '2') {
        this.tableData1 = [...this.minusLists]
      }
    },
    cellClassName({ row, rowIndex, column, columnIndex }) {
      if (['addNum', 'minusNum'].includes(column.property)) {
        return 'col-cursor'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.model-con {
  border: 1px solid #ebeef5;
  padding: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .sub-title {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
  .mytable {
    margin-top: 30px;
    .status {
      color: #bc1316;
    }
    /deep/.vxe-body--column.col-cursor {
      cursor: pointer;
      &:hover {
        text-decoration-line: underline;
        color: #0957af;
      }
    }
  }
}
</style>
